<template>
	<div class="saleAdd">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/admin' }">HomePage</el-breadcrumb-item>
			<el-breadcrumb-item>Add NewsSales Order</el-breadcrumb-item>
		</el-breadcrumb>
		
		<div style="margin-top:10px;">
			<el-button  type="danger" icon="el-icon-tickets" @click="SaveSalesOrder('goodsForm')">SavesNew</el-button>
		</div>
		<div class="conditions">
			<el-form ref="goodsForm" :line=true :model="goodsForm" :rules="rules" label-width="160px">
				 <el-row class="good_detail">
					<div class="canEdit" style="margin-top:-5px; ">
					 	<el-form-item label="Customer" prop="CustomerID" style="margin-bottom:0px; float:left;margin-left:-50px;">  
						     <el-select v-model="goodsForm.CustomerID" placeholder="Please choose" filterable clearable  @change="changeCustomer($event)">
									<el-option v-for="(item, index) in CustomerList" :key="index" :label="item.CompanyName" :value="item.CustomerID"></el-option>
							 </el-select>
						    <el-button type="primary" icon="el-icon-search" @click="searchCustomer"></el-button> 
					     </el-form-item>
						 
						<el-form-item label="Contact" prop="CompanyContactID"  style="margin-bottom:0px;float:left;margin-left:-50px;"  >
						   <el-select v-model="goodsForm.CompanyContactID" placeholder="Please choose"   filterable clearable>
								  <el-option v-for="(item, index) in CompanyContactList" :key="index" :label="item.ContactName" :value="item.CompanyContactID"></el-option>
						    </el-select>
						</el-form-item> 
				 		
				 		 <el-form-item label="RequestDate" style="margin-bottom:0px;float:left;margin-left:-40px;">
					 		<el-date-picker
						      v-model="goodsForm.OrderDate"
						      type="date"
						      format="yyyy-MM-dd"
						      placeholder="Select date">
						    </el-date-picker>
						 </el-form-item>
						 <el-form-item label="Company Site" prop="SiteID"  style="margin-bottom:0px;float:left;margin-left:-50px;"  >
						   <el-select v-model="goodsForm.SiteID" placeholder="Please choose"   filterable clearable>
								  <el-option v-for="(item, index) in CompanySiteList" :key="index" :label="item.SiteCode" :value="item.SiteID  "></el-option>
						    </el-select>
						</el-form-item>
						
						 <el-form-item label="SalesRep" prop="SalesRepID"  style="margin-bottom:0px;float:left;margin-left:-50px;"  >
						   <el-select v-model="goodsForm.SalesRepID" placeholder="Please choose"   filterable clearable>
								  <el-option v-for="(item, index) in SalesList" :key="index" :label="item.employeeName" :value="item.employeeID"></el-option>
							</el-select>
						</el-form-item>
						
						<el-form-item label="Customer PO NO"  style="margin-bottom:0px;float:left;margin-left:10px;"  >
						   <el-input v-model="goodsForm.CustomerPONo" ></el-input>
						</el-form-item>
						<el-form-item label="TradeTerm" prop="TradeTermID"  style="margin-bottom:0px;float:left;margin-left:-50px;"  >
						   <el-select v-model="goodsForm.TradeTermID" placeholder="Please choose"   filterable clearable>
								  <el-option v-for="(item, index) in TradeTermList" :key="index" :label="item.TradeTerm" :value="item.TradeTermID"></el-option>
							</el-select>
						</el-form-item> 
				 
				 		<el-form-item label="PaymentTerm" prop="PaymentTermID"  style="margin-bottom:0px;float:left;margin-left:-30px;"  >
						   <el-select v-model="goodsForm.PaymentTermID" placeholder="Please choose"   filterable clearable>
								  <el-option v-for="(item, index) in PaymentTermList" :key="index" :label="item.PaymentTerm" :value="item.PaymentTermID"></el-option>
							</el-select>
						</el-form-item> 
						
						<el-form-item label="Currency" prop="CurrencyID"  style="margin-bottom:0px;float:left;margin-left:-50px;"  >
						   <el-select v-model="goodsForm.CurrencyID" placeholder="Please choose" @change="changeCurrency($event)"  filterable clearable>
								  <el-option v-for="(item, index) in CurrencyList" :key="index" :label="item.CurrencyName" :value="item.CurrencyID"></el-option>
							</el-select>
						</el-form-item> 
						<el-form-item label="Rate" prop="CurrencyRate"  style="margin-bottom:0px;float:left;margin-left:-50px;"  >
							<el-input v-model="goodsForm.CurrencyRate" ></el-input>
						</el-form-item> 
						
						<el-form-item label="Ship Via/ACCT#" prop="ShipVia"  style="margin-bottom:0px;float:left;margin-left:20px;"  >
							<el-input v-model="goodsForm.ShipVia" ></el-input>
						</el-form-item> 
						
						
						<el-form-item label="BillToCompany" prop="BillToCompany"  style="margin-bottom:0px;float:left;margin-left:-20px;display:block;clear:both;"  >
							 <el-input v-model="goodsForm.BillToCompanyName" @focus="billInput($event)"  ></el-input>
							 <el-input type="textarea"  :autosize="{ minRows: 5, maxRows: 8}" v-model="goodsForm.BilltoAddress"></el-input>
						</el-form-item> 
						
						<el-form-item label="ShipToCompany" style="margin-bottom:0px;margin-left:-20px;float:left;"  >
							 <el-input v-model="goodsForm.ShipToCompanyName"  @focus="shipInput($event)" ></el-input>
							 <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 8}" size='medium'  v-model="goodsForm.ShiptoAddress"></el-input>
						</el-form-item>
					
				 	 </div>
				  </el-row>
				
				<!-- Customer 搜索 -->	
					<el-dialog  title ="Search Customer" :visible.sync="dialogTableCustomer" customClass="customWidth_50">
						<el-input v-model="CustomerName" placeholder="Search Customer Name" style="width:32%;" clearable></el-input>
					  <el-button type="primary" icon="el-icon-search" @click="CustomerNameSearch">Search</el-button>
					  <el-table :data="tableCustomerList" style="margin-top:1px;"> 
						<el-table-column property="CustomerStatusName" label="Status" width="80" ></el-table-column>
					    <el-table-column label="CompanyName"  align="center" width="220">
						   <template slot-scope="scope" > 
								<span @click="openHomeCustomer(scope.row)" style="cursor:pointer">{{ scope.row.CompanyName }}</span>
						   </template>
					    </el-table-column>
					    <el-table-column property="CompanyAlias" label="Alias" width="200" ></el-table-column>
						<el-table-column property="State" label="Region" width="80" ></el-table-column>
						<el-table-column property="CountryName" label="Country" width="100" ></el-table-column>
						<el-table-column property="CompanyAddress" label="CompanyAddress" width="150" ></el-table-column>
						
					  </el-table>
					</el-dialog>
					
					<!-- focus 聚焦 -->	
					<el-dialog :title="titleMap[dialogStatus]"  :visible.sync="billtovisiable" customClass="customWidth_50">
					  <el-table :data="Billtable" style="margin-top:-20px;"> 
					    <el-table-column label="CompanyName"  align="center" width="220">
						   <template slot-scope="scope" > 
								<span @click="openHomeBill(scope.row)" style="cursor:pointer">{{ scope.row.BizCompanyName }}</span>
						   </template>
					    </el-table-column>
					    <el-table-column property="BizCompanyName2" label="CompanyName2" width="200" ></el-table-column>
						<el-table-column property="ContactName" label="Contact" width="100" ></el-table-column>
						<el-table-column property="AddressLine" label="Address" width="150" ></el-table-column>
					  </el-table>
					</el-dialog>
					
					
					 
			</el-form>	
		</div>
		
	</div>
</template>

<script>
export default {
	data() {
		return {
			goodsForm:{
					CustomerID:'',
					CompanyContactID:'',
					OrderDate:'',
					SiteID:'',
					TradeTermID:'',
					PaymentTermID:'',
					CustomerPONo:'',
					SalesRepID:'',
					ShipVia:'',
					CurrencyID:'',
					CurrencyRate:'',
					CurrencyName:'',
					ShipToCompanyName:'',
					BillToCompanyName:'',
					BilltoCompanyID:'',
					ShiptoCompanyID:'',
					BilltoAddress:'',
					ShiptoAddress:'',
					OrderRemarkID:0,
					Customerparam:'',
					BizCompanyName:'',
					
					},
			CompanyID:'',
			CustomerID:'',
			
					
			CustomerList:[],
			CompanyContactList:[],
			PaymentTermList:[],
			TradeTermList:[],
			CurrencyList:[],
			BizCompanyList:[],
			CompanySiteList:[],
			SalesList:[],
			dialogTableCustomer:false,
			CustomerName:'',
			tableCustomerList:[],
			BillList:[],
			ShipList:[],
			Shiptable:[],
			Billtable:[],
			billtovisiable:false,
			
			
			titleMap: {
                     bill:'',
                     ship: "",
                 },
			dialogStatus: "",
			
			
			rules: {
				 CustomerID: [
			            { required: true, message: 'Please choose Customer', trigger: 'change' }
			          ],
			     CompanyContactID: [
			            { required: true, message: 'Please choose Contact', trigger: 'change' }
			          ],
			     SiteID: [
			            { required: true, message: 'Please choose CompanySite', trigger: 'change' }
			          ],
			     SalesRepID: [
			            { required: true, message: 'Please choose SalesRep', trigger: 'change' }
			          ],
			     TradeTermID: [
			            { required: true, message: 'Please choose TradeTerm', trigger: 'change' }
			          ],
			     PaymentTermID: [
			            { required: true, message: 'Please choose PaymentTerm', trigger: 'change' }
			          ],   
			     CurrencyID: [
			            { required: true, message: 'Please choose Currency', trigger: 'change' }
			          ],
			     
			               
			        },
				        
		};
	},
	created() {
		this.CompanyID = parseInt(this.$route.query.CompanyID); 
		this.CustomerID = parseInt(this.$route.query.CustomerID); 
		
		this.detail();
		
		this.getCustomerList();
		this.getTradeterm();
		this.getCompanyContactList();
		this.getPaymentTermList();
		this.getCurrencyList();
		this.getBizCompanyList();
		this.getCompanySite();
		this.getSalesRepList();
		this.goodsForm.OrderDate =this.getNowFormatDate();
		this.BillToShip();
		this.ShipToBill();
		
	},
	methods: {
		detail(){
			this.goodsForm.CustomerID=this.CustomerID;
			this.goodsForm.CompanyContactID = parseInt(this.$route.query.ContactID);
			this.goodsForm.PaymentTermID = parseInt(this.$route.query.PaymentTermID);
			this.goodsForm.ShipVia =  this.$route.query.ShipVia;
			this.goodsForm.CurrencyID = parseInt(this.$route.query.CurrencyID);
			this.goodsForm.CurrencyRate = this.$route.query.CurrencyRate;
			this.goodsForm.CurrencyName = this.$route.query.CurrencyName;
			
			this.goodsForm.BilltoCompanyID = parseInt(this.$route.query.BilltoCompanyID);
			this.goodsForm.ShiptoCompanyID = parseInt(this.$route.query.ShiptoCompanyID);
			this.goodsForm.BilltoAddress = this.$route.query.BilltoAddress;
			this.goodsForm.ShiptoAddress = this.$route.query.ShiptoAddress;
			this.goodsForm.OrderRemarkID = this.$route.query.OrderRemarkID;
			
		},
		
		undefined(val){
			if(val == 'undefined'){
			
			}
		
		},
		
		getCustomerList(){
			axios.get('/api/CustomerCompany?CustomerID='+this.CustomerID).then(result => {
				this.CustomerList = result.data.result.data;
					});
		
		},
		//默认联系人
		getCompanyContactList(){
			axios.get('/api/companycontact?CompanyID='+this.CompanyID).then(result => {
				this.CompanyContactList = result.data.result;
					});
		
		},
		//默认Tradeterm
		getTradeterm(){
			axios.get('/api/TradeTermSales?CompanyID='+this.CompanyID).then(result => {
					this.TradeTermList = result.data.result;
				});
		},
		//默认PaymentTerm
		getPaymentTermList(){
			axios.get('/api/PaymentTermSales?CompanyID='+this.CompanyID).then(result => {
					this.PaymentTermList = result.data.result;
				});
		
		},
		//默认BizCompany
		getBizCompanyList(){
			axios.get('/api/bizCompany?CompanyID='+this.CompanyID).then(result => {
					this.BizCompanyList = result.data.result;
				});
		},
		
		
		getCurrencyList(){
			axios.get('/api/currency').then(result => {
					this.CurrencyList = result.data.result;
				});
		},
		
		//获取Site
		getCompanySite(){
			axios.get('/api/companysite').then(result => {
					this.CompanySiteList = result.data.result;
				});
		},
		//获取销售人员
		getSalesRepList(){
	      		axios.get('/api/getsalesRep').then(result => {
					this.SalesList = result.data.result;
				});
	    },
		//保存销售订单
		SaveSalesOrder(formName){
			this.$refs[formName].validate((valid) => {
	          if (valid) {
	           // var CompanyID =this.$route.query.CompanyID; 
	          	axios.post('/api/sale/salesorderadd',{pagram:this.goodsForm})
	          	.then(result => {
						if (result.data.code == 200) {
							//this.dialogFormVisible = false;
							this.$notify({
								  title: 'Success',
								  message: result.data.message,
								  type: 'success'
								});
								this.$router.push({ path: '/sales'});
							
						} else {
							this.$message.error({
								title: 'Error',
								message: result.data.message
							});
						}
					})
	          } else {
	            this.$message.error({
							title: 'Error',
							message: 'Please enter *'
						});
	            return false;
	          }
	        });
		},
		//搜索searchCustomer
		searchCustomer(){
			this.dialogTableCustomer=true;
			this.CustomerList=[];
	    	this.CustomerName='';
			this.tableCustomerList=[];
		},
		CustomerNameSearch(){
			if(this.CustomerName == '' || this.CustomerName.length<=1){
	    				this.$alert('Text cannot be empty,more than 2 strings, please enter', 'Tips', {
			                  confirmButtonText: 'confirm'
					        });
					        return;
	    			}
	    			axios.get('/api/customer/customerlist?companyname='+this.CustomerName).then(result => {
						this.tableCustomerList = result.data.result;
					});
		},
		openHomeCustomer(row){
	    			this.dialogTableCustomer =false;
			        this.goodsForm.CustomerID = parseInt(row.CustomerID);
			        this.goodsForm.Customerparam = row;
			        this.CustomerID = parseInt(row.CustomerID);
			        this.getCustomerList();
			        //console.log(this.goodsForm.CustomerID);
			        var CID = this.goodsForm.CustomerID;
			        this.goodsForm.CompanyContactID ='';
					this.goodsForm.TradeTermID ='';
					this.goodsForm.PaymentTermID ='';
					this.goodsForm.CompanyContactID ='';
					
					this.goodsForm.BilltoCompanyID ='';
					this.goodsForm.ShiptoCompanyID = '';
					this.goodsForm.BilltoAddress = '';
					this.goodsForm.ShiptoAddress = '';
					this.goodsForm.ShipToCompanyName = '';
					this.goodsForm.BillToCompanyName = '';
			        this.Contact(CID);
			        this.TradeTerm(CID);
			        this.PaymentTerm(CID);
			        
			        
	    		},		
		
		//改变changeCustomer
		changeCustomer(e){
			 this.goodsForm.CompanyContactID ='';
			 this.goodsForm.TradeTermID ='';
			 this.goodsForm.PaymentTermID ='';
			 this.goodsForm.CompanyContactID ='';
			 this.goodsForm.BilltoCompanyID ='';
			 this.goodsForm.ShiptoCompanyID = '';
			 this.goodsForm.BilltoAddress = '';
			 this.goodsForm.ShiptoAddress = '';
			 this.goodsForm.ShipToCompanyName = '';
			 this.goodsForm.BillToCompanyName = '';
			
			 axios.get('/api/companyContactChange?CustomerID=' +e).then(result => {
							this.CompanyContactList = result.data.result;
						});
			
			axios.get('/api/TradeTermSales?CustomerID='+e).then(result => {
					this.TradeTermList = result.data.result;
				});
			axios.get('/api/PaymentTermSales?CustomerID='+e).then(result => {
					this.PaymentTermList = result.data.result;
				});
			axios.get('/api/bizCompany?CustomerID='+e).then(result => {
					this.BizCompanyList = result.data.result;
				});
		},
		//1
		Contact(e){
			axios.get('/api/companyContactChange?CustomerID=' +e).then(result => {
							this.CompanyContactList = result.data.result;
					});
			},
		//2
		TradeTerm(e){
			axios.get('/api/TradeTermSales?CustomerID='+e).then(result => {
						this.TradeTermList = result.data.result;
					});
			},
		//3
		PaymentTerm(e){
			axios.get('/api/PaymentTermSales?CustomerID='+e).then(result => {
					this.PaymentTermList = result.data.result;
				});
			},
		//4
		bizCompany(e){
			axios.get('/api/bizCompany?CustomerID='+e).then(result => {
					this.BizCompanyList = result.data.result;
				});
			},
		
		//改变Currency
		changeCurrency(e){
			//this.goodsForm.CurrencyID ='';
			this.goodsForm.CurrencyRate='';
			this.goodsForm.CurrencyName ='';
			 axios.get('/api/ChangeCurrency?CurrencyID=' +e).then(result => {
							this.goodsForm.CurrencyRate=result.data.result.BaseCurrencyRate;
							this.goodsForm.CurrencyName =result.data.result.CurrencyName;
						});
		},
		//Bill--Ship 
		BillToShip(){
			axios.get('/api/billship?BizCompanyID='+this.goodsForm.BilltoCompanyID).then(result => {
							this.goodsForm.BillToCompanyName =result.data.result[0].BizCompanyName;
						});
		},
		ShipToBill(){
			axios.get('/api/billship?BizCompanyID='+this.goodsForm.ShiptoCompanyID).then(result => {
							this.goodsForm.ShipToCompanyName =result.data.result[0].BizCompanyName;
						});
		},
		
		//焦点
		billInput(e){
			console.log(this.goodsForm.BilltoCompanyID,11111);
			this.billtovisiable=true;
			this.dialogStatus = "bill";
			this.goodsForm.BilltoCompanyID ='';
			axios.get('/api/billship?CustomerID='+this.goodsForm.CustomerID).then(result => {
							this.Billtable =result.data.result;
						});
		},
		shipInput(e){
			console.log(this.goodsForm.BilltoCompanyID,11111);
			this.billtovisiable=true;
			this.dialogStatus = "ship";
			this.goodsForm.ShiptoCompanyID ='';
			axios.get('/api/billship?CustomerID='+this.goodsForm.CustomerID).then(result => {
							this.Billtable =result.data.result;
						});
		},
		openHomeBill(row){
		console.log(this.dialogStatus);
			this.billtovisiable =false;
			if(this.dialogStatus == 'bill'){
				this.goodsForm.BillToCompanyName = row.BizCompanyName;
				this.goodsForm.BilltoAddress =row.AddressLine;
				this.goodsForm.BilltoCompanyID =row.BizCompanyID;
			}
			if(this.dialogStatus == 'ship'){
				 this.goodsForm.ShipToCompanyName = row.BizCompanyName;
				 this.goodsForm.ShiptoAddress =row.AddressLine;
				 this.goodsForm.ShiptoCompanyID =row.BizCompanyID;
			}
			console.log(row,9999,this.goodsForm.BilltoCompanyID);
	       
		},
		openHomeShip(){
			
			
			
		},
		getNowFormatDate() {
			    var date = new Date();
			    var seperator1 = "-";
			    var year = date.getFullYear();
			    var month = date.getMonth() + 1;
			    var strDate = date.getDate();
			    if (month >= 1 && month <= 9) {
			        month = "0" + month;
			    }
			    if (strDate >= 0 && strDate <= 9) {
			        strDate = "0" + strDate;
			    }
			    var currentdate = year + seperator1 + month + seperator1 + strDate;
			    return currentdate;
			},
			
		handleClick(tab, event) {              //选项卡
			console.log(tab, event);
		},  
		handleCurrentChange(val) {  //表格选中行事件
			this.currentRow = val;
		}
	}
};
</script>

<style lang="scss">
.el-select .el-input {
		    width: 160px!important;
		}

		.good_detail{
			.time1{
				width: 100%;
				clear: left;
				.demonstration{
					display: inline-block;
					width: 86px;
					text-align: right;
					padding-right: 8px;
					font-size: 14px;
					font-weight: 600;
					color: #606266;
				}
			}
			
			.canEdit{
				float: left;
				width: 100%;
				margin-top: 25px;
				.el-input__inner{
					width: 160px;
				}	
				.item-detail{
					float: left
				}
			}
		
	}
</style>
